<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">发布车源</view>
		</view>	
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg05.png')" mode="widthFix"></image>
			<view class="bg_content">
					
				<view class="details_box">
					<!-- <view class="list">
						<view class="name">标题</view>
						<input type="text" v-model="title" value="" placeholder="请输入标题" />
					</view> -->
					<!-- <view class="list">
						<view class="name">批发价</view>
						<input type="text" v-model="member_price" value="" placeholder="请输入批发价" />
						<view class="yuan">万元</view>
					</view> -->
					<view class="list">
						<view class="name">批发价<span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="market_price" value="" placeholder="请输入批发价" />
						<view class="yuan">万元</view>
					</view>
					<view class="list">
						<view class="name">车辆品牌 <span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="brand_name" @click="to_select_model()" placeholder="请选择" />
						<view class="arrow iconfont icon-xiangyou1" @click="to_select_model()"></view>
					</view>
					<view class="list">
						<view class="name">车型 <span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="series_name" value="" placeholder="请输入车型" />
					</view>
					<view class="list">
						<view class="name_2">上牌日期<span style="color: red;margin-left: 2px;"> *</span></view>
						<view class="right">
							<picker mode="date" fields="month" :style="{'width': '60vw'}" :value="date" @change="bindDateChange">
								<input type="text" v-model="reg_time" value="" placeholder="请选择" disabled="true" style="pointer-events:none"/>
							</picker>
						</view>
						<view class="arrow iconfont icon-xiangyou1" @change="bindDateChange"></view>
					</view>
					<view class="list">
						<view class="name">出厂日期</view>
						<view class="right">
							<picker mode="date" fields="month" :style="{'width': '60vw'}" :value="date" @change="bindDateChange_2">
								<input type="text" v-model="production_date" value="" placeholder="请选择" disabled="true" style="pointer-events:none"/>
							</picker>
						</view>
						<view class="arrow iconfont icon-xiangyou1" @change="bindDateChange_2"></view>
					</view>
					<view class="list">
						<view class="name">指导价格</view>
						<input type="text" v-model="procure_price" value="" placeholder="请输入指导价格" />
						<view class="yuan">万元</view>
					</view>
					<view class="list">
						<view class="name">排放标准</view>
						<input type="text" v-model="outext" value="" placeholder="例如国六" />
					</view>
					<view class="list">
						<view class="name">车辆里程<span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="mileage" value="" placeholder="请输入车辆里程" />
						<view class="yuan">万公里</view>
					</view>
					<view class="list">
						<view class="name">汽车排量</view>
						<input type="text" v-model="output" value="" placeholder="例如2.5" />
					</view>
					<view class="list">
						<view class="name">手动自动</view>
						<view class="radio_box">
							<radio-group v-model="is_auto" @change="radioChange">
								<block :value="item.value" v-for="(item, index) in radioList" :key="index">
									<label class="radio">
										<radio color="#FF7701" :value="item.value" :checked="item.checked" />{{ item.text }}
									</label>
								</block>
							</radio-group>
						</view>
					</view>
					<view class="list">
						<view class="name">能源类型</view>
						<view class="radio_box">
							<radio-group @change="radioChange_2" v-model="energy">
								<block :value="item.value" v-for="(item, index) in radioList_1" :key="index">
									<label class="radio">
										<radio color="#FF7701" :value="item.value" :checked="item.checked" />{{ item.text }}
									</label>
								</block>
							</radio-group>
						</view>
					</view>
					<view class="name_1">汽车配置(130)<span style="color: red;margin-left: 2px;"> *</span></view>
					<view class="textarea">
						<textarea placeholder="例如豪华型或全自动天窗" placeholder-style="color:#B5B5B5" maxlength="130" v-model="configuration" />
					</view>
					<view class="list">
						<view class="name">过户次数</view>
						<input type="text" v-model="tran_num" value="" placeholder="请输入过户次数" />
						<view class="yuan">次</view>
					</view>
					<view class="name_1">详细车况(300)<span style="color: red;margin-left: 2px;"> *</span></view>
					<view class="textarea">
						<textarea placeholder="例如豪华型或全自动天窗" placeholder-style="color:#B5B5B5" maxlength="300" v-model="content" />
					</view>
				</view>
				<!-- <view class="details_box">
					<view class="details_title">车辆照片</view>
					<image :src="logo" :style="{width: imageWidth}" mode="widthFix" @tap="up_img()"></image>
				</view>	-->
				<view class="details_box">
					<view class="details_title">车辆照片<span style="color: red;margin-left: 2px;"> *</span></view>
					<!-- <view class="standing">
						<image src="../../static/car01.png" mode="widthFix"></image>
					</view> -->
					<block v-for="(item, index) in imgdata" :key="index">
						<view class="img">
							<image :src="item" mode="" :data-img="imgdata" :data-index="index" @tap.stop="openPreviewImage" mode="aspectFill"></image>
							<view class="xx iconfont3" @tap.stop="deleteMsg(index)" v-if="index >= indexNumber">X</view>
						</view>
					</block>					
					<image :src="getImgSrc('/static/car01.png')" mode="widthFix" @tap="getImg()"></image>
				</view>	
				
				<view class="details_box">
					<view class="list">
						<view class="name">联系电话<span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="phone" value="" placeholder="请输入联系电话" />
					</view>
					<view class="list">
						<view class="name">车辆所在地<span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" @tap="openAddres" v-model="pickerText" value="" placeholder="请选择车辆所在地" />
						<view class="arrow iconfont icon-xiangyou1" @tap="openAddres"></view>
					</view>
				</view>
				
				<view class="clear_box04"></view>
				<view class="confirm" @click="publish">确认修改</view>
				
			</view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"themeColor="#333"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				id:'',
				brand_name:'',
				title:'',
				member_price:'',
				brand_id:0,
				reg_time:'',
				production_date:'',
				market_price:'',
				outext:'',
				mileage:'',
				output:'',
				is_auto:0,
				energy:0,
				configuration:'',
				tran_num:'',
				content:'',
				phone:'',
				procure_price:'',
				pickerText:'',
				date:'2020-01',
				logo:this.getImgSrc('/static/car01.png'),
				imgdata: [],
				indexNumber:0,
				imageWidth:'100%',
				cityPickerValueDefault: [0, 0, 1],
				prov:'',
				city:'',
				area:'',
				series_name:'',
				radioList: [
				    { value: 0, text: '手动', checked:false },
				    { value: 1, text: '自动', checked:false },
				],
				radioList_1: [
				    { value: 0, text: '油车', checked:false },
				    { value: 2, text: '新能源', checked:false },
				],
			}
		},
		components: {
			simpleAddress
		},
		onLoad(e) {
			let that = this;
			that.id = e.id;
			uni.$on('pu_brand', (data) => {
				if (data == 0) {
					that.brand_id = 0;
					that.brand_name = '请选择';
				} else {
					that.brand_id = data.id;
					that.brand_name = data.name;
				}
			});
			that.loadData();
		},
		methods: {
			numberInputResult(e){
				console.log('结果--'+e)
			},
			setRule(e){
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				that.Net._get('index/car_detail', {id:that.id}, res => {
					if (res.code == 1) {
						that.info = res.data;
						that.title = res.data.title;
						that.market_price = res.data.market_price/10000;
						that.member_price = res.data.member_price;
						that.procure_price = res.data.procure_price;
						// that.logo = res.data.logo;
						that.imgdata = res.data.picture;
						that.energy = res.data.energy;
						that.mileage = res.data.mileage;
						that.gearbox = res.data.gearbox;
						that.output = res.data.output;
						that.tran_num = res.data.tran_num;
						that.phone = res.data.phone;
						that.reg_time = res.data.reg_time;
						that.prov = res.data.prov;
						that.city = res.data.city;
						that.content = res.data.content;
						that.production_date = res.data.production_date;
						that.is_auto = res.data.is_auto;
						that.configuration = res.data.configuration;
						that.pickerText = res.data.city;
						that.brand_id = res.data.brand_id;
						that.brand_name = res.data.brand_name;
						that.outext = res.data.outext;
						that.area = res.data.area;
						this.series_name = res.data.series_name;
						that.radioList[that.is_auto]['checked'] = true;
						that.radioList_1[0]['checked'] = true;
						if (res.data.energy_type == 2){
							that.radioList_1[1]['checked'] = true;
						}
					}
				});
			},
			to_select_model(){
				uni.navigateTo({
					url: '/pages/brand/brand_d'
				});
			},
			bindDateChange: function(e) {
				let that = this;
				that.reg_time = e.target.value;
				that.date = e.target.value;
			},
			bindDateChange_2: function(e) {
				let that = this;
				that.production_date = e.target.value;
			},
			radioChange(e){
				let that = this;
				that.is_auto = e.detail.value;
			},
			radioChange_2(e){
				let that = this;
				that.energy = e.detail.value;
			},
			getImg() {
				let that = this;
				let countNum;
				if(that.imgdata.length == 0){
					countNum = 3;
				}else if(that.imgdata.length == 1){
					countNum = 2;
				}else if(that.imgdata.length > 1){
					countNum = 1;
				}
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'], // 可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], // 可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; // 图片选择完成后 获取该图片的路劲
						//console.log(temFilePath)
						for (var i = 0; i < temFilePath.length; i++) {
							uni.uploadFile({
								url: that.Cfg.Setting.root + 'index/lb_upload', // 上传文件的Controller
								filePath: temFilePath[i], // 要上传的文件路径
								name: 'file',
								success: res => {
									//console.log(JSON.parse(res.data))
									let imgData = JSON.parse(res.data);
									that.imgdata = that.imgdata.concat(imgData.data);
								}
							});
						}
					}
				});
			},
			deleteMsg(n) {
				if (n == -2) {
					this.imgdata = [];
				} else {
					this.imgdata.splice(n, 1);
				}
			},
			up_img(e) {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], // 可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], // 可选择性开放访问相册、相机
					success: function (res) {
						const temFilePath = res.tempFilePaths; // 图片选择完成后 获取该图片的路劲
						uni.uploadFile({
							url:that.Cfg.Setting.root + 'index/lb_upload', // 上传文件的Controller
							filePath: temFilePath[0], // 要上传的文件路径
							name:'file',
							success: (res) => {
								that.imageWidth = '35%';
								let img = JSON.parse(res.data)
								that.logo = img.data;
							}
						})
					}
				});
			},
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1];
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				let that = this;
				let pickerText = e.label.split('-');
				that.prov = pickerText[0];
				that.city = pickerText[1];
				that.area = pickerText[2];
				if (pickerText[1] == '市辖区'){
					that.city = pickerText[0];
					that.pickerText = that.prov;
				}else{
					that.pickerText = that.prov + '-' + that.city ;
				}
			},
			publish(){
				let that = this;
				/* if (that.title == ''){
					that.Msg.Fail('请输入标题');
					return '';
				} */
				/* if (that.logo == this.getImgSrc('/static/car01.png')) {
					that.Msg.Fail('请上传车辆图片');
					return '';
				} */
				if (that.imgdata == '') {
					that.Msg.Fail('请上传车辆图片');
					return '';
				}
				/* if (!that.member_price) {
					that.Msg.Fail('请输入批发价');
					return '';
				} */
				if(that.brand_id == 0){
					that.Msg.Fail('请选择品牌');
					return '';
				}
				if (that.series_name == '') {
					that.Msg.Fail('请输入车型');
					return '';
				}
				if (that.reg_time == '') {
					that.Msg.Fail('请选择上牌时间');
					return '';
				}
				/* if (that.production_date == '') {
					that.Msg.Fail('请选择出厂日期');
					return '';
				} */
				if (that.market_price == '') {
					that.Msg.Fail('请输入批发价');
					return '';
				}
				if (that.mileage == '') {
					that.Msg.Fail('请输入行使里程');
					return '';
				}
				if (that.output == '') {
					that.Msg.Fail('请填写排放量');
					return '';
				}
				/* if (that.tran_num == '') {
					that.Msg.Fail('请输入过户次数');
					return '';
				} */
				if (that.phone == '') {
					that.Msg.Fail('请输入车主手机号');
					return '';
				}
				/* if (that.procure_price == '') {
					that.Msg.Fail('请输入指导价格');
					return '';
				} */
				if (that.content == '') {
					that.Msg.Fail('请输入车况');
					return '';
				}
				if (that.prov == '') {
					that.Msg.Fail('请选择车辆所在地');
					return '';
				}
				if (that.energy == 2){
					that.energy = '新能源';
				}else{
					that.energy = '汽油';
				}
				let params = {
					id:that.id,
					title:that.title,
					// logo: that.logo,
					brand_id: that.brand_id,
					reg_time: that.reg_time,
					production_date: that.production_date,
					market_price: that.market_price,
					member_price: that.member_price,
					outext: that.outext,
					mileage: that.mileage,
					is_auto: that.is_auto,
					energy: that.energy,
					configuration: that.configuration,
					images: that.imgdata,	
					content: that.content,
					phone: that.phone,
					procure_price : that.procure_price,
					prov: that.prov,
					city: that.city,
					area: that.area,
					tran_num: that.tran_num,
					output:that.output,
				};
				console.log(params)
				that.Net._post('auth/team/car_edit', params, res => {
					if (res.code == 1) {
						that.Msg.Success('修改成功', res => {
							uni.navigateBack({});
						});
					}
				});
				
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
		  
		},
	}
</script>

<style>
	
	.header{
		background-color: transparent !important;
		height: 18vw !important;
	}
	
	.header .text{
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back{
		color: #333 !important;
	}
	
	.scrrolHeader{
		background-color: #FFE6D0 !important;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.details_box {
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}
	
	.details_boxNo{
		padding: 0vw 4%;
	}
	
	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}
	
	.details_box .input_box{
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #FC5D20;
		height: 15vw;
	}
	
	.details_box .input_box .m{
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		margin-top: 2vw;
	}
	
	.details_box .input_box input{
		font-size: 7vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}
	
	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}
	
	.details_box .list .name {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
	}
	
	.details_box .list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.details_box .list .text .i{
		width: 5vw;
		margin-right: 1vw;
	}
	
	.details_box .list .text .i image{
		width: 100%;
	}
	
	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
		font-weight: bold;
	}
	
	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
	}
	
	.standing{
		width: 100%;
	}
	
	.standing image{
		width: 100%;
	}
	
	.standing .text{
		width: 100%;
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-top: 3vw;
		text-align: center;
	}
	
	.details_box .standing:nth-child(2){
		margin-top: 5vw;
	}
	
	.radio_box{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	.radio_box .radio{
		margin-left: 3vw;
	}
	
	.radio_box .radio radio{
		font-size: 3.5vw;
	}
	
	.name_1 {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
		padding: 2vw 0;
	}
	
	.textarea{
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		border-bottom: 1px solid #F3F3F3;
		height: 30vw;
	}
	
	.img {
		width: 28vw;
		height: 28vw;
		border: 1px solid #e8e8e8;
		border-radius: 2vw;
		flex-basis: auto;
		margin-bottom: 3vw;
		margin-right: 2%;
		position: relative;
		box-sizing: border-box;
		display: inline-block;
		/* margin-top: 10vw; */
	}
	
	.img:last-child{
		margin-right: 0;
	}
	
	.img .xx {
		font-size: 4vw;
		color: #000;
		position: absolute;
		right: 0.5vw;
		top: 0.5vw;
	}
	
	.img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.addimg {
		width: 28vw;
		height: 28vw;
		border: 1px solid #e8e8e8;
		border-radius: 2vw;
		flex-basis: auto;
		margin-bottom: 3vw;
		position: relative;
		font-size: 10vw;
		line-height: 30vw;
		text-align: center;
		color: #e8e8e8;
		box-sizing: border-box;
		/* margin-top: 10vw; */
	}
	
	.details_box .list .name_2 {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 2vw;
	}
</style>
